<!-- 新建好友分组 -->
<template>
    <div class="friend-group">
        <div class="title">好友分组</div>
        <div class="content" @click="createGroup">
            <div class="icon-warp">
                <i  class="iconfont icon-tianjiafenzu icon"/>
            </div>
            <div class="text">新建分组</div>
        </div>
        <div class="content" @click="deleteGroup">
            <div class="icon-warp">
                <i  class="iconfont icon-24gl-userGroupMinus2 icon"/>
            </div>
            <div class="text">删除分组</div>
        </div>
    </div>
</template>

<script lang="ts">
import axios from 'axios';
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class CreateFriendGroup extends Vue {

    // 当前的分组
    @Prop({type: Array, required:true})
    private groups:any[] | any;

    // 新建分组
    public createGroup(){
        this.$prompt('请输入分组名','提示',{
            inputValidator: (input:string)=>{
                if(input == null || input === ''){
                    return '至少一个字符';
                }
                if(this.groups.findIndex((f:any)=> f.name===input) >= 0){
                    return '已有该分组了';
                }
                return true
            }
        })
        .then(res=>{
            const groupName = (res as any).value;
            this.createGroupImpl(groupName)
        })
        .catch(err=>{/*ignore*/})
    }

    // 新建分组的实现
    private createGroupImpl(groupName: string){
        axios.post('/api/v1/friend/group/create/' + groupName)
            .then(res=>{
                if(res.data.code===200){
                    res.data.data.targetUserEmails = []
                    this.groups.push(res.data.data)
                }else{
                    this.$message.error(res.data.msg)
                }
            })
            .catch(err=>{
                this.$message.error('新建分组失败:' + err)
            })
    }

    // 删除分组
    public deleteGroup(){
        this.$prompt('请输入分组名','提示',{
            inputValidator: (input:string)=>{
                if(this.groups.findIndex((f:any)=> f.name===input) < 0){
                    return '未找到该分组';
                }
                return true
            }
        })
        .then(res=>{
            const groupName = (res as any).value
            axios.post('/api/v1/friend/group/del/' + groupName)
                .then(res=>{
                    if(res.data.code===200){
                        const index = this.groups.findIndex((g:any)=>g.name===groupName)
                        if(index >= 0){
                            this.groups.splice(index, 1)
                        }
                        this.$message.success('删除分组成功')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
                .catch(err=>{
                    this.$message.error('删除分组失败:' + err)
                })
        }).catch(err=>{})
    }

}
</script>

<style lang="less" scoped>
@import '../css/iconfont.less';
.friend-group{
    width: 100%;
    .title{
        font-size: 10px;
        color: #999999;
        padding: 10px;
    }
    .content{
        display: flex;
        align-items:center;
        padding: 10px;
        &:hover{
            background-color:#DEDBDA;
        }
        .icon-warp{
            width: 40px;
            height: 40px;
            background-color: #2BA245;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            .icon{
                font-size: 18px;
                color: white;
            }
        }
        .text{
            font-size: 14px;
            margin-left: 10px;
        }
    }
}
</style>